<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="command/Bootstrap/bootstrap-3.3.0/css/bootstrap.css" />
		<link rel="stylesheet" href="command/bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.css" />
		<link rel="stylesheet" href="command/bower_components/bootstrap-table/dist/bootstrap-table.min.css" />
		<script src="command/jquery-3.4.0.min.js"></script>
		<script src="command/Bootstrap/bootstrap-3.3.0/js/bootstrap.min.js"></script>
		<script src="command/bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
		<script src="command/bower_components/moment/min/moment.min.js"></script>
		<script src="command/bower_components/moment/min/locales.min.js"></script>
		<script src="command/bower_components/bootbox/bootbox.min.js"></script>
		<script src="command/bower_components/bootstrap-select/js/bootstrap-select.js"></script>
		<script src="command/bower_components/bootstrap-switch/dist/js/bootstrap-switch.min.js"></script>
		<script src="command/bower_components/bootstrap-table/dist/bootstrap-table.min.js"></script>
		<script sre="command/bower_components/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>
		<script src="command/bower_components/moment/min/moment-with-locales.min.js"></script>
		<link href="command/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" rel="stylesheet" />
		<link href="command/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
		<script type="application/javascript">
			function look() {
				window.location.href = "htlbckxq.html";
			}

			function change() {
				window.location.href = "htlbchange.html";
			}

			function gd() {
				var gd1 = confirm("是否确定归档");
				if (gd1) {
					alert("归档成功");
					window.location.href = "htlb.html";
				}
			}
			$(function() {
				//读取数据类型
				$.ajax({
					type: "get", //提交类型
					dataTyp: "json", //数据类型
					url: "json/htlb.json", //数据访问路径
					success: function(reslt) { //返回成功后所调用得函数
						createTable(reslt); //函数调用
					},
					error: function(date) { //返回失败所调用得函数
						alert(date);
					}
				});
			});
			/*将数据绑定在表格上*/
			function createTable(userData) {
				$("#tblUser").bootstrapTable("destroy"); //清空表格
				$("#tblUser").bootstrapTable({
					data: userData,
					loadMsg: "正在加载数据",
					sidePagination: "client",
					pageSize: "2", //分页
					pagination: true,
					singleSelect: true,
					columns: [{
							field: "state",
							checkbox: true,
							align: "center"
						},
						{
							field: "id",
							title: "合同编号",
							align: "center"
						},
						{
							field: "htmz",
							title: "合同名字",
							align: "center"
						},
						{
							field: "finalhtje",
							title: "最终合同金额",
							align: "center"
						},
						{
							field: "kaishidate",
							title: "开始时间",
							align: "center"
						},
						{
							field: "htfj",
							title: "合同附件",
							align: "center"
						},
						{
							field: "jiezhidate",
							title: "合同截止时间",
							align: "center"
						},
						{
							field: "htfgsmc",
							title: "合同方公司名称",
							align: "center"
						},
						{
							field: "htflxr",
							title: "合同方联系人",
							align: "center"
						},
						{
							field: "sfybcht",
							title: "是否有补充合同",
							align: "center"
						}
					]
				});
			}
		</script>
	</head>
	<body>
		<div class="panel panel-default">
			<div class="panel-heading">
				合同列表
			</div>
			<div class="panel-body">
				<div class="input-group">
					<input type="search" id="search" placeholder="搜索内容" />
					<button class="btn-xs btn-info">查询</button>
				</div>
				<hr />
				<div class="btn-group">
					<button class="btn btn-default" onclick="look()">查看详情</button>
					<button class="btn btn-danger" onclick="gd()">归档</button>
					<button class="btn btn-warning" onclick="change()">修改</button>
					<a href='http://127.0.0.1:8848/Contract%20Management/htlb.html' download='file.html'>
						<button class="btn btn-success active">下载</button>
					</a>
				</div>
				<hr />

				<!--列表开始-->
				<div class="row col-md-10">
					<table id="tblUser"></table>
				</div>
				<!--列表结束-->
			</div>
		</div>
	</body>
</html>
